<template>
  <div class="body">
    <div class="OrderList" v-for="(order,index) in OrdersList" :key="index">
      <div class="M_name" @click="toOrderDetail(order.orderNumber,order.mid)">{{order.gname}}</div>
      <div class="O_state" @click="toOrderDetail(order.orderNumber,order.mid)" >{{order.ostate}}</div>
      <div class="U_picture" @click="toOrderDetail(order.orderNumber,order.mid)" ><img :src="order.gimg"/></div>
      <div class="G_describe" @click="toOrderDetail(order.orderNumber,order.mid)" >{{order.gdescribe}}</div>
      <div class="price" @click="toOrderDetail(order.orderNumber,order.mid)" > ￥{{order.price}}</div>
      <button class="deleteGoods" @click="deleteOrderUser(order.orderNumber)">删除订单</button>
      <button class="confirmReceipt" @click="ButtonByoState2(order.ostate,order.orderNumber)":type="ButtonByoState(order.ostate,order.orderNumber)">{{gstate}}</button>
    </div>
  </div>
</template>

<script>

  import {deleteOrderUserencapsulation} from "../api/user";
  import {ButtonByoState2encapsulation} from "../api/user";
  import axios from "axios";
    export default {
      components: {},
      name: "UserOrder",
      data() {
        return {
          gName: '',
          mName: '',
          gstate: '',//根据订单状态，改写确认收货按钮内容,
          orderList: '',
          ButtonByoState: function (ostate) {

            if (ostate === '已完成') {
              this.gstate = '评价';
            } else if (ostate === '已发货') {
              this.gstate = '确认收货';
            } else if (ostate === '未发货') {
              this.gstate = '确认收货';
            } else {
              this.gstate = '确认收货';
            }

          },
        };
      },
      props: ['OrdersList'],
      methods: {
        // 删除订单
        deleteOrderUser(orderNumber) {
          var that = this;
          var r = confirm("您确定要删除本条记录嘛！！");
          if (r === true) {
            deleteOrderUserencapsulation({
              orderNumber: orderNumber,
            }).then((res) => {
              console.log(res.data.data)
              if (res.data.data===true){
                this.$message.success("删除数据成功！！");
                this.findOrdersAllUser() //重新查询订单列表
              }else {
                this.$message.error("删除数据失败！！");
              }
            })/*.catch(res=>{
              alert("出错了，请重试")
              });*/
            location.reload();
          } else {

          }
        },
        ButtonByoState2(gstate, orderNumber) {
          if (gstate === '已发货' || gstate==='未发货') {
            ButtonByoState2encapsulation({
              uid: this.$store.state.user.uid,
              orderNumber: orderNumber,
              orderstate: '已完成',
            }).then((res) => {
              location.reload();
             if (res.data.data===1){
               this.$message.success("已完成！！");
             }
            });

          }

        },
        //查看订单详情
        toOrderDetail(orderNumber,mid){
          this.$router.replace({
            path: '/OrderDetail',
            query:{
              orderNumber:orderNumber,
              mid: mid,
            }
          })
        }
      },
    }


</script>

<style scoped>
.body::before{
  content:'';
  position: fixed;
  z-index: -1;
  background-size: 100% auto;
  background-color: rgb(242,242,242);
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  padding: 0px;
  margin: 0px;

}
.OrderList{
  position: relative;
  width: 92%;
  height: 99px;
  top: 70px;
  right: 10px;
  left: 10px;

  background-color:rgb(255,255,255);
  /*border: 2px solid white;*/
  margin-top: 20px;
  border-radius: 30px;
}
.M_name {
  position: relative;
  width: 100px;
  height: 3px;
  top: 3px;
  left: 5px;
  font-size: 10px;
  font-weight: bold;
  /* background-color: wheat; */
}
.O_state {
  position: relative;
  width: 100px;
  height: 3px;
  top: 0px;
  left: 210px;
  font-size: 10px;
  color: rgb(252,85,49);
  /* background-color: wheat; */
}
.U_picture {
 /* border: 1px solid #2c3e50;*/
  position: relative;
  width: 64px;
  height: 55px;
  top: 15px;
  left: 20px;
  font-size: 10px;
  /* background-color: wheat; */
}
.G_describe {
   position: relative;
   width: 99px;
   height: 55px;
   top: -42px;
   left: 100px;
   font-size: 10px;
   /* background-color: wheat; */
 }
.price {
  position: relative;
  width: 30px;
  height: 55px;
  top: -95px;
  left: 240px;
  font-size: 10px;
  /* background-color: wheat; */
}
.confirmReceipt{
  position: relative;
  width: 64px;
  height: 25px;
  top: -100px;
  left: 72px;
  color: rgb(252,85,49);
  font-size: 5px;
  border-radius: 30px;
  border:1px solid rgb(252,85,49);
}
.deleteGoods {
  position: relative;
  width: 64px;
  height: 25px;
  top: -100px;
  left: 65px;
  font-size: 5px;
  border-radius: 30px;
  border:1px solid #CCC;
  /* background-color: wheat; */
}
img{
  width: 64px;
  height: 55px;
}
</style>
